export default class MyMarker extends window.BMap.Overlay {

  constructor(center, length, color) {
    super()
    this.center = center
    this.length = length
    this.color = color
  }

  initialize(map) {
    this.map = map
    const div = document.createElement('div')
    const styleObj = {
      position: 'absolute',
      width: `${this.length}px`,
      height: `${this.length}px`,
      backgroundColor: this.color
    }
    Object.assign(div.style, styleObj)
    map.getPanes().markerPane.appendChild(div)
    this.div = div

    return div
  }

  /**
   * draw 会在每次移动或缩放时候
   */
  draw() {
    // 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物
    const position = this.map.pointToOverlayPixel(this.center)
    Object.assign(this.div.style, {
      top: `${position.y - this.length / 2}px`,
      left: `${position.x - this.length / 2}px`
    })
  }

  show() {
    this.div && (this.div.style.display = '')
  }

  async hide() {
    this.div && (this.div.style.display = 'none')
  }

  toggle() {
    this.div && ((this.div.style.display = '') ? this.hide() : this.show())
  }
}
